<template>
  <!-- 必须有固定高度 -->
  <div ref="line" style="height: 100%"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
//引入echarts
// 因为内部有分别暴露和默认暴露,所以使用as改名全部引入
import * as echarts from "echarts";

let line = ref();

onMounted(() => {
  // 需要在挂载之后获取实例,因为setup在Mounted前执行
  let mycharts = echarts.init(line.value);
  mycharts.setOption({
    // title 组件
    // title:{
    //     text:'123'
    // },
    // x轴组件
    xAxis: {
      type: "category",
      show: false,
      boundaryGap: false,
    },
    // y轴组件
    yAxis: {
      show: false,
    },
    //布局组件
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
    },
    // 系列组件
    series: {
      type: "line",
      // 数据
      data: [10, 40, 20, 30, 60, 50],
      // 线段颜色
      lineStyle: {
        color: "pink",
      },
      //  平滑曲线
      smooth: true,
      //   小球子隐藏
      symbol: "none",
      //背景色
      areaStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "yellowgreen", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "skyblue", // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
      },
    },
  });
});
</script>

<style scoped>
</style>